<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>04-绑定style样式</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <p v-bind:style="str">绑定style样式--字符串形式</p>
            <p v-bind:style="obj">绑定style样式--对象形式</p>
            <p v-bind:style="arr">绑定style样式--数组形式</p>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false

        new Vue({
            el: "#app",
            data: {
                str: "width:200px;height:200px;background:pink;",
                obj: {
                    width: "200px",
                    height: "200px",
                    backgroundColor: "skyblue"
                },
                arr: [
                    {
                        width: "200px",
                        height: "200px",
                    },
                    {
                        backgroundColor: "skyblue"
                    }
                ]
            }
        })
        
    </script>
</html>